<template>
  <!-- 块元素方便布局 -->
  <div>
    <svg-icon icon-class="fullscreen" style="color:#fff; width: 20px; height: 20px" @click="changeScreen" />
  </div>
</template>
<script>
import ScreenFull from 'screenfull'
export default {
  name: 'ScreenFullIndex', // 组件名称
  components: {// 注册组件
  },
  filters: {// 局部过滤器
  },
  props: {// 父传递数据
  },
  data () { // 数据变量
    return {
    }
  },
  computed: {// 计算属性
  },
  watch: {// 事件侦听
  },
  activated () { // 组件激活时调用的函数
  },
  created () { // data数据加载完毕执行函数
  },
  mounted () { // DOM首次加载完毕时执行的函数
  },
  updated () { // 数据更新时执行的函数,执行多次
  },
  methods: { // 函数定义
  // 点击全屏
    changeScreen () {
      if (!ScreenFull.isEnabled) {
        // 判断是否可以使用，取反表示如果不可用
        this.$message.success('此时全屏组件不可用')
        return
      }
      // document.documentElement.requestFullscreen()  原生js调用
      //   如果可用 就可以全屏
      ScreenFull.toggle()// 既可以全屏也可以退出全屏
    }
  }

}
</script>
<style lang='less' scoped>
</style>
